<template>
  <div>
    <div id="main" style="width:700px ;height:233px;"></div>

    <div class="echart" id="byrsBar" :style="{ float: 'left', width: '60%', height: '300px'  }"></div>

    <!-- <div id="mainer" style="width: 600px; height: 400px"></div> -->
  </div>
  </template>
  
  <script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
      name: 'index',
      data() {
        return {
          zhuzhuangtu:{
            chengshitekunRenyuan:'',
            youfuLaonianren:'',
            dibaoLaonianren:'',
            jihuashengyuTekun:'',
            dishouruLaonianren:'',
            nongcuntekunRenyuan:''
          },
          ceshi:'30',
          zuihou:{
          ziliLaoren:'',
          banziliLaoren:'',
          shinengLaoren:''}
        }
      },
      mounted(){
        
        
        this.bingzhuangtu();
        this.dangdang();
    
      },
      methods: {
        getByrsEcharts () {
   const option = {
     // 标题
     title: {
       text: '老人分类统计'
     },
    // 鼠标放到图上展示的数据样式，trigger: 'axis'   (有axis/item/none三个值,axis是一条竖线)
     tooltip: {},
    // 用来标志图表数据，data字段的数组需要对应每个柱条的名称，鼠标hover到最顶部的legend标志，可以标志对应的图，点击legend标志会隐藏对应的图
     legend: {
       data: ['人数']
     },
     // 配置x轴数据、样式、名称
     xAxis: {
       type: 'category', // 可以不写，默认type就是category
       data: ['城市特困人员(三无)', '扶优老人', '低保老人', '计划生育特困家庭老人', '低收入老人', '农村特困人员(五保)'], // x轴数据
       name: '',   // x轴名称
       // x轴名称样式
       nameTextStyle: {
         fontWeight: 600,
         fontSize: 18
       }
     },
     // 配置y轴名称，样式
     yAxis: {
       name: '数量',   // y轴名称
     },
     // y轴数据，每个柱条的名称
     series: [
       {
         name: '老人分类统计',
         type: 'bar', // 类型为柱状图
         data: [this.zhuzhuangtu.chengshitekunRenyuan, this.zhuzhuangtu.youfuLaonianren,
         this.zhuzhuangtu.dibaoLaonianren, this.zhuzhuangtu.jihuashengyuTekun,
         this.zhuzhuangtu.dishouruLaonianren, this.zhuzhuangtu.nongcuntekunRenyuan],
         barWidth: '20%', // 柱条宽度 每个柱条的宽度就是类目宽度的 20%
         // 柱子的样式
         itemStyle: {
           color: '#5574c2'
         }
       }
     ]
   }
   const byrsBar = echarts.init(document.getElementById('byrsBar'))// 图标初始化
   byrsBar.setOption(option)// 渲染页面
   // 随着屏幕大小调节图表
   window.addEventListener('resize', () => {
     byrsBar.resize()
   })
 },
            dangdang(){
                axios.get("/chain-api/ruzhu/zhuzhuangtu").then(res=>{
                  this.zhuzhuangtu=res.data.data;
                  this.getByrsEcharts();
                })
          },
        bingzhuangtu(){
          axios.get("/chain-api/ruzhu/bingzhuangtu").then(res=>{
            this.zuihou=res.data.data;
            this.getPie();
            console.log("111111111111111::::::: "+this.zuihou.ziliLaoren);
            console.log("222222222222222222::::::: "+this.zuihou.banziliLaoren);
            console.log("333333333333333333::::::: "+this.zuihou.shinengLaoren);
            // console.log("222222222222222::::::: "+this.data.data.ziliLaoren);
            
          })
         
        },
        getPie() {
          
          // 绘制图表
          var myChart = echarts.init(document.getElementById('main'))
          // 指定图表的配置项和数据
          var option = {
            //标题
            title: {
              text: '',
              x: 'left' ,              //标题位置
              // textStyle: { //标题内容的样式
              //   color: '#000',
              //   fontStyle: 'normal',
              //   fontWeight: 100,
              //   fontSize: 16 //主题文字字体大小，默认为18px
              // },
            },
            // stillShowZeroSum: true,
            //鼠标划过时饼状图上显示的数据
            tooltip: {
              trigger: 'item',
              formatter: '{a}<br/>{b}:{c} ({d}%)'
            },
            //图例
            legend: {//图例  标注各种颜色代表的模块
              // orient: 'vertical',//图例的显示方式  默认横向显示
              bottom: 10,//控制图例出现的距离  默认左上角
              left: 'center',//控制图例的位置
              // itemWidth: 16,//图例颜色块的宽度和高度
              // itemHeight: 12,
              textStyle: {//图例中文字的样式
                color: '#000',
                fontSize: 16
              },
              data: ['自理老人', '失能老人', '半自理老人']//图例上显示的饼图各模块上的名字
            },
            //饼图中各模块的颜色
            color: ['#32dadd', '#b6a2de', '#5ab1ef'],
            // 饼图数据
            series: {
              // name: 'bug分布',
              type: 'pie',             //echarts图的类型   pie代表饼图
              radius: '70%',           //饼图中饼状部分的大小所占整个父元素的百分比
              center: ['50%', '50%'],  //整个饼图在整个父元素中的位置
              // data:''               //饼图数据
              data: [                  //每个模块的名字和值
                { name: '自理老人', value: this.zuihou.ziliLaoren},
                { name: '半自理老人', value: this.zuihou.banziliLaoren},
                { name: '失能老人', value: this.zuihou.shinengLaoren}
              ],
              itemStyle: {
                normal: {
                  label: {
                    show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                    // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                  },
                  labelLine: {
                    show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
                  }
                }
              },
            }
  
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option)
        }
      }
  
    }
  
  </script>
  
  <style scoped>
  #main{
    position: absolute;
    left: 400px;
    top: 360px;
  }
  #byrsBar{
    position: absolute;
    left: 350px;
    top: 85px;
  }
  </style>